<template>
  <div class="discovery-container">
    <!-- 轮播图 -->
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="(bannerObj,index) in banners" :key="index">
        <img :src="bannerObj.imageUrl" alt="">
      </el-carousel-item>
    </el-carousel>
    <!-- 推荐歌单 -->
    <div class="recommend">
      <h3 class="title">推荐歌单</h3>
      <div class="items">
        <div class="item"
        v-for="(songObj,index) in songList" :key="index">
          <div class="img-wrap">
            <div class="desc-wrap">
              <span class="desc">
                {{songObj.copywriter}}
              </span>
            </div>
              <img :src="songObj.picUrl" alt="">
              <span
              class="iconfont icon-play"
              @click="playMusic(songObj.id)"></span>
          </div>
          <p class="name">{{songObj.name}}</p>
        </div>
      </div>
    </div>
    <!-- 最新音乐 -->
    <div class="news">
      <h3 class="title">推荐歌单</h3>
      <div class="items">
        <div class="item"
        v-for="(newObj,index) in newList" :key="index">
          <div class="img-wrap">
            <img :src="newObj.picUrl" alt="">
            <span class="iconfont icon-play"
            @click="playMusic(newObj.id)"></span>
          </div>
          <div class="song-wrap">
            <div class="song-name">{{newObj.name}}</div>
            <div class="singer">{{newObj.song.artists[0].name}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐mv -->
    <div class="mvs">
      <h3 class="title">推荐歌单</h3>
      <div class="items">
        <div class="item"
        v-for="(mvObj,index) in mvList" :key="index">
          <div class="img-wrap">
            <img :src="mvObj.picUrl" alt=""/>
            <span class="iconfont icon-play"
            @click="playMusic(mvObj.id)"></span>
            <div class="num-wrap">
              <div class="iconfont icon-play"
              @click="playMusic(mvObj.id)"></div>
              <div class="num">{{mvObj.playCount}}</div>
            </div>
          </div>
          <div class="info-wrap">
            <div class="name">{{mvObj.name}}</div>
            <div class="singer">{{mvObj.artistName}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      // 轮播图
      banners: [],
      // 推介歌单
      songList: [],
      // 最新歌曲
      newList: [],
      // mv
      mvList: []
    }
  },
  created () {
    this.loadBanner()
    this.loadRecommend()
    this.loadNew()
    this.loadMv()
  },
  methods: {
    loadBanner () {
      axios({
        url: 'https://autumnfish.cn/banner',
        methods: 'get',
        params: {}
      }).then(res => {
        const { banners } = res.data
        this.banners = banners
      })
    },
    loadRecommend () {
      axios({
        url: 'https://autumnfish.cn/personalized',
        methods: 'get'
        // params: {}
      }).then(res => {
        const { result } = res.data
        this.songList = result
      })
    },
    loadNew () {
      axios({
        url: 'https://autumnfish.cn/personalized/newsong',
        methods: 'get'
        // params: {}
      }).then(res => {
        const { result } = res.data
        this.newList = result
      })
    },
    loadMv () {
      axios({
        url: 'https://autumnfish.cn/personalized/mv',
        methods: 'get'
      }).then(res => {
        const { result } = res.data
        this.mvList = result
        console.log(result)
      })
    },
    // 点击播放歌曲
    playMusic (id) {
      axios({
        url: 'https://autumnfish.cn/song/url',
        method: 'get',
        params: {
          id
        }
      }).then(res => {
        // console.log(res);
        const musicUrl = res.data.data[0].url
        // 拿到某个父组件的值
        this.$parent.musicUrl = musicUrl
      })
    }
  }
}
</script>
